import React, { useState, useRef } from 'react';
import { Input, Button, Space, Tooltip, message } from 'antd';
import { SendOutlined, ClearOutlined, AudioOutlined } from '@ant-design/icons';

const { TextArea } = Input;

const MessageInput = ({ onSendMessage, loading = false, disabled = false }) => {
  const [inputValue, setInputValue] = useState('');
  const [isComposing, setIsComposing] = useState(false);
  const textAreaRef = useRef(null);

  // 发送消息
  const handleSend = () => {
    const trimmedValue = inputValue.trim();
    if (!trimmedValue) {
      message.warning('请输入消息内容');
      return;
    }

    if (trimmedValue.length > 2000) {
      message.warning('消息内容过长，请控制在2000字符以内');
      return;
    }

    onSendMessage(trimmedValue);
    setInputValue('');
    
    // 重新聚焦到输入框
    setTimeout(() => {
      textAreaRef.current?.focus();
    }, 100);
  };

  // 清空输入
  const handleClear = () => {
    setInputValue('');
    textAreaRef.current?.focus();
  };

  // 处理键盘事件
  const handleKeyDown = (e) => {
    // 中文输入法组合时不处理
    if (isComposing) return;

    // Ctrl/Cmd + Enter 发送消息
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
      e.preventDefault();
      handleSend();
    }
    
    // Enter 发送消息（可选，根据用户习惯）
    if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
      e.preventDefault();
      handleSend();
    }
  };

  // 处理中文输入法
  const handleCompositionStart = () => {
    setIsComposing(true);
  };

  const handleCompositionEnd = () => {
    setIsComposing(false);
  };

  // 语音输入（占位功能）
  const handleVoiceInput = () => {
    message.info('语音输入功能开发中...');
  };

  return (
    <div 
      style={{ 
        padding: '16px 24px',
        backgroundColor: '#fff',
        borderTop: '1px solid #f0f0f0',
        boxShadow: '0 -2px 8px rgba(0,0,0,0.06)'
      }}
    >
      <Space.Compact style={{ width: '100%' }}>
        <TextArea
          ref={textAreaRef}
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyDown={handleKeyDown}
          onCompositionStart={handleCompositionStart}
          onCompositionEnd={handleCompositionEnd}
          placeholder="请输入您的问题... (Ctrl+Enter 发送)"
          autoSize={{ minRows: 1, maxRows: 4 }}
          disabled={disabled}
          style={{ 
            resize: 'none',
            borderRadius: '8px 0 0 8px'
          }}
          showCount={{
            max: 2000,
            formatter: (info) => `${info.count}/2000`
          }}
        />
        
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <Button
            type="primary"
            icon={<SendOutlined />}
            onClick={handleSend}
            loading={loading}
            disabled={disabled || !inputValue.trim()}
            style={{ 
              height: '40px',
              borderRadius: '0 8px 0 0',
              borderLeft: 'none'
            }}
          >
            发送
          </Button>
          
          <div style={{ display: 'flex' }}>
            <Tooltip title="清空输入">
              <Button
                icon={<ClearOutlined />}
                onClick={handleClear}
                disabled={disabled || !inputValue}
                style={{ 
                  height: '32px',
                  borderRadius: '0',
                  borderLeft: 'none',
                  borderTop: 'none'
                }}
                size="small"
              />
            </Tooltip>
            
            <Tooltip title="语音输入">
              <Button
                icon={<AudioOutlined />}
                onClick={handleVoiceInput}
                disabled={disabled}
                style={{
                  height: '32px',
                  borderRadius: '0 8px 0 0',
                  borderLeft: 'none',
                  borderTop: 'none'
                }}
                size="small"
              />
            </Tooltip>
          </div>
        </div>
      </Space.Compact>

      <div style={{ 
        marginTop: '8px', 
        fontSize: '12px', 
        color: '#8c8c8c',
        textAlign: 'center'
      }}>
        提示：按 Enter 发送消息，Shift+Enter 换行，Ctrl+Enter 也可发送
      </div>
    </div>
  );
};

export default MessageInput;
